<template>
  <div class="ReView">
    <!-- <div class="Statis_box">
      <StatisticView :city_list="city_list" />
    </div>
    <div class="content_chart">
      <div class="Gaugebox">
        <GaugeView :city_list="city_list" />
      </div>
      <div class="pieview">
        <PieView2 :city_list="city_list" />
      </div>
    </div>
    <div class="footer_chart">
      <div class="footer_top">
        <div class="head_box_echart">
            <BarwEcharts4 :city_list="city_list" />
        </div>
        <div class="foot_box">
            
            <LinewEcharts3 :city_list="city_list" />
        </div>
      </div>
      <dv-border-box-10>
        <GaugeView2 :city_list="city_list" />
      </dv-border-box-10>
    </div>-->
<div class="review_info_box">
  <div  class="review_info_box_item">
    <StatisticView :city_list="city_list" />
    <!-- <br> -->
    <div small-bg>
    <dv-decoration5 :dur="2" style="width:100%;height:20px;" />
  </div>
  </div>

</div>
    <div class="head_box_echart">
      <div class="head_box_echart_item1">
        <PieView2 :city_list="city_list" />
      </div>
      <div class="head_box_echart_item2">
        <GaugeView :city_list="city_list" />
      </div>
      <div class="head_box_echart_item3">
        <BarwEcharts4 :city_list="city_list" />
      </div>
    </div>
    <div class="foot_box">
      <div class="foot_box_item1">
        <LinewEcharts3 :city_list="city_list" />
      </div>
      <div class="foot_box_item2">
        <GaugeView2 :city_list="city_list" />
      </div>
    </div>
  </div>
</template>
    
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { menuStore } from "@/store/modules/menu";
const menulist = menuStore();
let { default_city } = storeToRefs(menulist);
let route = useRoute();
let city_list: any = ref("");

const getdata = async () => {
  if (route.query.id) {
    city_list.value = route.query.id;
    console.log("路由传值", city_list.value);
  } else {
    city_list.value = default_city.value.SPOT_ID
      ? default_city.value.SPOT_ID
      : default_city.value.DIM_SPOT_ID;
    console.log("默认传值", city_list.value);
  }
};
menulist.$subscribe((arg, state) => {
  //需要写在数据变化前面
  console.log("subscribe=========================", arg, state);
  getdata();
});
onMounted(() => {
  getdata();
});

watch(
  () => route.query.id,
  newRoute => {
    console.log(newRoute);
    getdata();
  }
);
</script>
    
    <style lang="scss" scoped>
.ReView {
  width: 100%;
  height: calc(100vh - 57px);
  // background-color: rgba(77, 76, 76, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .review_info_box{
    width: 100%;
    height: 10%;
    background-color: rgb(243, 243, 243);
    .review_info_box_item{
      margin: 0 auto;
      // padding-top: 10px;
      width: 60%;
      height: 60%;
    }
  }
  .head_box_echart {
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: row;
    // gap: 5px;
    // background-color: aquamarine;
    .head_box_echart_item1 {
      flex: 1.5;
      // background-color: aqua;
      height: 100%;
    }
    .head_box_echart_item2 {
      flex: 1;
      // background-color: aqua;
      height: 100%;
    }
    .head_box_echart_item3 {
      flex: 1.5;
      // background-color: aqua;
      height: 100%;
    }
  }
  .foot_box {
    // background-color: aqua;
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: row;
    .foot_box_item1 {
      flex: 2;
      height: 100%;
    }
    .foot_box_item2 {
      flex: 1;
      height: 100%;
    }
  }
  // background-color: aqua;
}
</style>